<template>
  <div>
    <!-- 文件上传按钮 -->
    <label htmlFor="file-upload" className="upload-btn">
      <span>上传视频</span>
    </label>
    <input type="file" id="file-upload" @change="handleFileUpload" accept="image/*,video/*"/>

    <!-- 渲染容器，确保占满整个屏幕 -->
    <div id="vrt-container"></div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import * as THREE from 'three';

const textureUrl = ref(null);  // 用于存储图片或视频的 URL
let isDragging = false;  // 是否正在拖拽
let previousMousePosition = {x: 0, y: 0};  // 上一次鼠标的位置
let video = null; // 用于存储视频元素

// 处理文件上传，支持图片和视频
const handleFileUpload = (event) => {
  const file = event.target.files[0];
  if (file) {
    // 创建一个 URL 对象
    const fileUrl = URL.createObjectURL(file);
    if (file.type.startsWith('video')) {
      // 如果是视频文件，创建一个 video 元素
      video = document.createElement('video');
      video.src = fileUrl;
      video.loop = true;  // 设置视频循环播放
      // video.muted = true; // 设置视频静音，避免在自动播放时发出声音
      video.play(); // 开始播放视频
      textureUrl.value = fileUrl; // 将视频的 URL 传给纹理更新
    } else if (file.type.startsWith('image')) {
      // 如果是图片文件，直接使用图片纹理
      textureUrl.value = fileUrl;
    }
  }
};

// 初始化和设置 Three.js 场景
onMounted(() => {
  const container = document.getElementById('vrt-container');
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);  // 设置为全屏
  container.appendChild(renderer.domElement);

  // 创建长方体几何体，作为 VR 环境的背景
  const width = 200;   // 长方体的宽度
  const height = 100;  // 长方体的高度
  const depth = 120;   // 长方体的深度
  const geometry = new THREE.BoxGeometry(width, height, depth);  // 创建长方体
  const material = new THREE.MeshBasicMaterial({
    side: THREE.BackSide, // 设置材质的背面
  });
  const cube = new THREE.Mesh(geometry, material);  // 创建长方体网格
  scene.add(cube);

  // 相机位置设置在长方体内，避免图像显示过大
  camera.position.set(0, 0, 0);  // 将相机放在长方体的中心

  // 动画渲染函数
  const animate = function () {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  };

  animate();

  // 监听 textureUrl 的变化，更新纹理
  watch(textureUrl, (newValue) => {
    if (newValue) {
      if (video) {
        // 如果是视频文件，使用 VideoTexture
        const videoTexture = new THREE.VideoTexture(video);
        videoTexture.minFilter = THREE.LinearFilter;
        videoTexture.magFilter = THREE.LinearFilter;
        videoTexture.format = THREE.RGBFormat;
        material.map = videoTexture; // 更新材质纹理为视频纹理
        material.needsUpdate = true; // 告诉 Three.js 更新材质
      } else {
        // 如果是图片文件，使用普通的纹理加载
        const textureLoader = new THREE.TextureLoader();
        textureLoader.load(newValue, (newTexture) => {
          material.map = newTexture;
          material.needsUpdate = true;  // 更新纹理
        });
      }
    }
  });

  // 处理鼠标拖拽事件
  const onMouseDown = (event) => {
    isDragging = true;
    previousMousePosition = {x: event.clientX, y: event.clientY};  // 记录下当前鼠标的位置
  };

  const onMouseMove = (event) => {
    if (!isDragging) return;  // 只有在按下鼠标时才处理
    const deltaX = event.clientX - previousMousePosition.x;
    const deltaY = event.clientY - previousMousePosition.y;

    // 更新相机的旋转，模拟VR环境中的视角变化
    camera.rotation.y -= deltaX * 0.003;  // X轴的拖动影响Y轴旋转
    camera.rotation.x -= deltaY * 0.003;  // Y轴的拖动影响X轴旋转

    // 更新上次鼠标位置
    previousMousePosition = {x: event.clientX, y: event.clientY};
  };

  const onMouseUp = () => {
    isDragging = false;  // 停止拖拽
  };

  const onMouseOut = () => {
    isDragging = false;  // 鼠标移出时也停止拖拽
  };

  // 鼠标滚轮事件，控制相机的缩放
  const onWheel = (event) => {
    // 禁用页面默认滚动行为
    event.preventDefault();

    // 根据鼠标滚动的方向调整相机的 zoom 属性
    const zoomSpeed = 0.1;
    if (event.deltaY < 0) {
      camera.zoom += zoomSpeed;  // 放大
    } else {
      camera.zoom -= zoomSpeed;  // 缩小
    }
    // 确保 zoom 在合理范围内
    camera.zoom = Math.max(0.1, Math.min(2, camera.zoom));
    camera.updateProjectionMatrix();  // 更新相机的投影矩阵
  };

  // 注册鼠标事件监听
  container.addEventListener('mousedown', onMouseDown);
  container.addEventListener('mousemove', onMouseMove);
  container.addEventListener('mouseup', onMouseUp);
  container.addEventListener('mouseout', onMouseOut);
  container.addEventListener('wheel', onWheel, {passive: false});  // 监听滚轮事件，注意加上 { passive: false }

  // 窗口大小变化时，更新渲染器大小和相机纵横比
  window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  });

});
</script>

  <style scoped>
  #vrt-container {
    margin: 0;
    padding: 0;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100vw; /* 确保容器填满整个视口 */
    height: 100vh; /* 确保容器填满整个视口 */
    background-color: #000; /* 背景为黑色 */
  }

/* 隐藏原始文件上传控件 */
input[type="file"] {
  display: none;
}

/* 自定义文件上传按钮 */
.upload-btn {
  display: inline-block;
  padding: 12px 20px;
  background-color: #4CAF50; /* 绿色背景 */
  color: white;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.upload-btn:hover {
  background-color: #45a049; /* 鼠标悬停时改变颜色 */
}

.upload-btn span {
  font-weight: bold;
}
</style>
